<script setup>
import {onMounted, onUnmounted, ref} from "vue";
import {createQueue, deleteQueue, listQueue} from "../../../http/rabbitmq/queue.js";
import {rabbitmqStore} from "../../../stores/counter.js";
import {listVhost} from "../../../http/rabbitmq/vhost.js";
import {listNode} from "../../../http/rabbitmq/node.js";


let queueName = ref("")
const vhostList = ref([])
const nodeList = ref([])

let queueTableData = ref([])

let queueForm = ref({
  "vhost": "/",
  "durable": "true",
  "auto_delete": "false",
  "arguments": {
    "x-queue-type": "classic"
  }
})

let showQueueForm = ref(false)
let queueUpdate = ref(false)

function showQueueCreate() {
  showQueueForm.value = true
  queueUpdate.value = false
}

function handleQueueSave() {
  handleQueueCreate()
}

function handleQueueCreate() {
  createQueue(queueForm.value).then(response => {
    handleQueueList()
    showQueueForm.value = false
  })
  queueForm.value = {
    "vhost": "/",
    "durable": "true",
    "auto_delete": "false",
    "arguments": {
      "x-queue-type": "classic"
    }
  }
}

function handleQueueDelete(vhost, name) {
  deleteQueue(vhost, name).then(response => {
    handleQueueList()
    showQueueForm.value = false
  })
}

function handleQueueList() {
  listQueue(queueName.value).then(response => {
    queueTableData.value = response.items
  })
}

function handleVhostList() {
  listVhost().then(response => {
    vhostList.value = response
  })
}

function handleNodeList() {
  listNode().then(response => {
    nodeList.value = response
  })
}

onMounted(() => {
  handleVhostList()
  handleNodeList()
  handleQueueList()
  rabbitmqStore().setTimer(handleQueueList)
})

onUnmounted(() => {
  clearInterval(rabbitmqStore().timer)
  rabbitmqStore().deleteTimer()
})

</script>

<template>
  <div style="display: flex; flex-flow: column nowrap; width: 100%; height: 100%; overflow: hidden;">
    <div style="display: flex; flex-flow: row nowrap; align-items: center; height: 40px;">
      <el-form :inline="true" style="height: 30px">
        <el-form-item label="Name">
          <el-input v-model="queueName" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQueueList()">Search</el-button>
          <el-button type="primary" @click="showQueueCreate({})">New</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
        highlight-current-row
        :data="queueTableData" border style="width: calc(100% - 5px); height: calc(100% - 50px)">
      <el-table-column prop="vhost" label="vhost" width="70"/>
      <el-table-column prop="name" label="name" min-width="100">
        <template #default="scope">
          <router-link :to="{path:'/queue-details', query: { name: scope.row.name, vhost: scope.row.vhost }}">
            {{ scope.row.name }}
          </router-link>
        </template>
      </el-table-column>
      <el-table-column prop="node" label="node" width="160"/>
      <el-table-column prop="type" label="type" width="80"/>
      <el-table-column prop="durable" label="durable" width="80"/>
      <el-table-column prop="auto_delete" label="auto_delete" width="110"/>
      <el-table-column prop="consumers" label="consumers" width="110"/>
      <el-table-column prop="state" label="state" width="90">
        <template #default="scope">
          <el-tag :type="scope.row.state === 'running' ? 'success' : 'danger'">{{ scope.row.state }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="consumer_capacity" label="consumer_capacity" width="100">
        <template #default="scope">
          {{ parseInt(scope.row.consumer_capacity * 100) }} %
        </template>
      </el-table-column>
      <el-table-column prop="policy" label="policy" width="86" show-overflow-tooltip>
        <template #default="scope">
          <router-link v-if="scope.row.policy" :to="{path:'/policy-details', query: { name: scope.row.policy, vhost: scope.row.vhost }}">
            <el-tag type="primary">{{ scope.row.policy }}</el-tag>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column prop="arguments" label="arguments" width="100" show-overflow-tooltip>
        <template #default="scope">
          <el-tooltip placement="left-start">
            <template #content>
              <div v-for="(value, key) in scope.row.arguments">
                {{ key }} : {{ value }}
              </div>
            </template>
            <el-tag type="primary">Args</el-tag>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column label="Messages">
        <el-table-column prop="messages_ready" label="Ready" width="70"/>
        <el-table-column prop="messages_unacknowledged" label="Unacked" width="90"/>
        <el-table-column prop="messages_ram" label="In Memory" width="100"/>
        <el-table-column prop="messages_persistent" label="Persistent" width="100"/>
        <el-table-column prop="messages" label="Total" width="80"/>
      </el-table-column>

      <el-table-column label="Message rates">
        <el-table-column prop="message_stats.deliver_details.rate" label="incoming" width="90"/>
        <el-table-column prop="message_stats.deliver_get_details.rate" label="deliver / get" width="110"/>
        <el-table-column prop="message_stats.redeliver_details.rate" label="redelivered" width="100"/>
        <el-table-column prop="message_stats.ack_details.rate" label="ack" width="80"/>
      </el-table-column>

      <el-table-column label="operations" width="100" fixed="right">
        <template #default="scope">
          <el-popconfirm
              width="230"
              hide-icon
              confirm-button-text="确定"
              cancel-button-text="取消"
              @confirm="handleQueueDelete(scope.row.vhost, scope.row.name)"
              :title="'是否删除Queue [ ' + scope.row.name + ' ] ？'">
            <template #reference>
              <el-button type="danger">
                删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <el-dialog title="queue manage" v-model="showQueueForm" :close-on-click-modal="false" label-width="160px">
    <el-form ref="form" :model="queueForm" label-width="160px">
      <el-form-item label="Virtual host">
        <el-select v-model="queueForm.vhost">
          <el-option
              v-for="item in vhostList"
              :key="item.name"
              :label="item.name"
              :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="queueForm.arguments['x-queue-type']">
          <el-option
              v-for="item in rabbitmqStore().queueType"
              :key="item.ukId"
              :label="item.name"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="queueForm.name"></el-input>
      </el-form-item>
      <el-form-item label="是否持久化">
        <el-select v-model="queueForm.durable">
          <el-option
              v-for="item in rabbitmqStore().durable"
              :key="item.ukId"
              :label="item.name"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="节点">
        <el-select v-model="queueForm.node" clearable>
          <el-option
              v-for="item in nodeList"
              :key="item.name"
              :label="item.name"
              :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQueueSave">Save</el-button>
        <el-button @click="showQueueForm = false">Cancel</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

</template>

<style scoped>

</style>